<template>
  <div class="default-content-background page-quit">
    <div class="select-container">
      <Select v-model="dataType" @on-change='changeTableType' style="width:120px">
        <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
    </div>
    <div class="table-container">
      <qtable
        :columns = "currentColumns"
        dataApi="/admin/payment/statistician"
        ref="incomeTable"
        >
      </qtable> 
    </div>
  </div>
</template>

<script>
import qtable from "../../components/qTable.vue";
export default {
  name: "page-quit",
  data() {
    return {
      dataType: "day",
      typeList: [
        {
          value: "day",
          label: "按天统计"
        },
        {
          value: "week",
          label: "按周统计"
        }
      ],

      currentColumns: [],
      columnsday: [
        {
          title: "统计时间",
          align: "center",
          key: "time"
        },
        {
          title: "充值入账",
          align: "center",
          key: "charge_count",
          render: (h, params) => {
            let renderText = `${params.row.charge_count / 100}`;
            return h("div", [h("span", renderText)]);
          }
        },
        {
          title: "退款金额",
          align: "center",
          key: "refund_count",
          render: (h, params) => {
            let renderText = `${params.row.refund_count / 100}`;
            return h("div", [h("span", renderText)]);
          }
        },
        {
          title: "当天收益",
          align: "center",
          key: "income",
          render: (h, params) => {
            let renderText = `${params.row.charge_count / 100 -
              params.row.refund_count / 100}`;
            return h("div", [h("span", renderText)]);
          }
        }
      ],
      columnsweek: [
        {
          title: "统计期间",
          align: "center",
          key: "time"
        },
        {
          title: "充值入账",
          align: "center",
          key: "charge_count",
          render: (h, params) => {
            let renderText = `${params.row.charge_count / 100}`;
            return h("div", [h("span", renderText)]);
          }
        },
        {
          title: "退款金额",
          align: "center",
          key: "refund_count",
          render: (h, params) => {
            let renderText = `${params.row.refund_count / 100}`;
            return h("div", [h("span", renderText)]);
          }
        },
        {
          title: "当周收益",
          align: "center",
          key: "income",
          render: (h, params) => {
            let renderText = `${params.row.charge_count / 100 -
              params.row.refund_count / 100}`;
            return h("div", [h("span", renderText)]);
          }
        }
      ]
    };
  },
  filters: {},
  methods: {
    changeTableType() {
      this.currentColumns = this["columns" + this.dataType];
      this.$refs.incomeTable.getTableDataByHttp([
        {
          name: "variety",
          value: this.dataType
        }
      ]);
    }
  },
  components: {
    qtable
  },
  mounted: function() {
    this.currentColumns = this.columnsday;
  }
};
</script>

<style lang="less">
.page-quit {
  padding: 10px;
  .select-container {
    margin-bottom: 10px;
    .ivu-select-selection {
      // background: #E6E6E6;
    }
  }
  .table-container {
    height: calc(~"100% - 46px") !important;
  }
}
</style>
